<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-form :model="employeeForm" :rules="rules" ref="employeeForm" label-width="250px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="employeeForm.username" style="width: 300px;" size="small"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input v-model="employeeForm.workNumber" style="width: 300px;" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="employeeForm.mobile" :disabled="Boolean($route.query.employeeId)" style="width: 300px;" size="small"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="departmentId">
          <!-- 级联选择器组件 -->
          <CascadeSelect v-model="employeeForm.departmentId"></CascadeSelect>
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select v-model="employeeForm.formOfEmployment" placeholder="请选择活动区域" style="width: 300px;" size="small">
            <el-option label="正式" :value="1"></el-option>
            <el-option label="非正式" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker v-model="employeeForm.timeOfEntry" type="date" placeholder="选择日期"  style="width: 300px;" size="small" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker v-model="employeeForm.correctionTime" type="date" placeholder="选择日期"  style="width: 300px;" size="small" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="员工头像" prop="staffPhoto" >
          <!-- 上传员工头像组件 -->
          <ImageUpload v-model="employeeForm.staffPhoto"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="validateForm" type="primary" size="small">{{$route.query.employeeId ? '保存修改' : '保存'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import CascadeSelect from './components/CascadeSelect'
  import ImageUpload from './components/ImageUpload'
  import { addEmployee, getEmployeeDetail, updateEmployee } from '@/api/employee'
  
  export default {
    name: 'Detail',
    components: { CascadeSelect, ImageUpload },
    data() {
      return {
        employeeForm: {
          username: '',
          workNumber: '',
          mobile: '',
          departmentId: null,
          formOfEmployment: null,
          timeOfEntry: '',
          correctionTime: '',
          staffPhoto: ''
        },
        // 表单校验规则
        rules: {
          username: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 1, max: 4, message: '姓名为1-4位', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
          ],
          departmentId: [{ required: true, message: '请选择部门', trigger: 'blur' }],
          formOfEmployment: [{ required: true, message: '请选择聘用形式', trigger: 'blur' }],
          timeOfEntry: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],
          correctionTime: [
            { required: true, message: '请选择转正时间', trigger: 'blur' },
            { validator: (rule, value, callback) => {
              if (this.employeeForm.timeOfEntry) {
                // 比较两个日期对象时，JS 会将日期对象隐式转换为时间戳来进行比较
                if (new Date(value) >= new Date(this.employeeForm.timeOfEntry)) {
                  callback()
                } else {
                  callback(new Error('转正时间不能小于入职时间'))
                }
              }
            }, 
            message: '转正时间不能小于入职时间', trigger: 'blur' },
          ]
        },
      }
    },
    methods: {
      validateForm() {
        this.$refs.employeeForm.validate(async valid => {
          if (valid) {
            // 通过查询参数里是否有员工id，判断是修改员工场景还是添加员工场景，有id就是修改模式
            if (this.$route.query.employeeId) {
              // 调用修改员工的请求接口
              await updateEmployee(this.employeeForm)
              // 弹出成功消息
              this.$message.success('修改员工信息成功')
              // 切换路由到员工列表页面
              this.$router.push('/employee')
            } else {
              // 调用新增员工的请求接口
              await addEmployee(this.employeeForm)
              // 弹出成功消息
              this.$message.success('新增员工成功')
              // 切换路由到员工列表页面
              this.$router.push('/employee')
            }
          }
        })
      },
      // 获取员工详细信息
      async getEmployeeDetail() {
       const result = await getEmployeeDetail(this.$route.query.employeeId)
       this.employeeForm = result
      }
    },
    created() {
      // 通过判断路由配置的query参数里是否有传递过来的员工id，来判断点击的是修改员工还是添加员工
      // 若是修改员工需要发送请求获取员工详细信息
      if (this.$route.query.employeeId) this.getEmployeeDetail()
    }
  }
</script>

<style lang="scss" scoped>
.app-container {
  .el-form {
    margin-top: 30px;
  }
}
</style>